/* Estilo para o cabeçalho */
header {
    background: #4CAF50;
    text-align: center;
    padding: 20px;
}

/* Estilo para o logotipo */
#logo {
    width: 20%;
    height: auto;
}

/* Estilo para o menu */

#menu {
    list-style-type: none;
    padding: 0;
    background: #4CAF50;
    display: flex; /* Faz com que os itens do menu fiquem em linha */
    justify-content: space-between; /* Espaço uniforme entre os itens do menu */
}

#menu li {
    margin: 0 2px;
}

#menu li a {
    text-decoration: none;
    color: white;
    font-size: 2em; /* Torna o tamanho da fonte duas vezes maior */
}

body {
    font-family: Arial, sans-serif;
    background-color: #f2f2f2;
    margin: 0;
    padding: 0;
}

header {
    background-color: #4CAF50;
    color: #fff;
    padding: 20px 0;
    text-align: center;
}

#menu {
    list-style-type: none;
    padding: 0;
}

#menu li {
    display: inline;
    margin-right: 15px;
}

#menu a {
    text-decoration: none;
    color: #fff;
    padding: 8px 16px;
    transition: background-color 0.3s, color 0.3s; /* Efeito hover */
}

#menu a:hover {
    background-color: #fff;
    color: #333; /* Efeito hover */
}

.blue-button {
    background-color: #007BFF;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s; /* Efeito hover */
}

.blue-button:hover {
    background-color: #0056b3; /* Efeito hover */
    transform: scale(1.05); /* Efeito hover - Aumenta ligeiramente o botão */
}

#logo {
    transition: transform 0.3s; /* Efeito hover */
}

#logo:hover {
    transform: rotate(10deg); /* Efeito hover - Gira o logo */
}

/* Estilo para o título h1 */
h1 {
    color: white;
    font-size: 3.2em;
    margin-bottom: 10px;
}

/* Estilo para os parágrafos */
p {
    font-size: 1.2em;
    line-height: 1.6em;
    text-align: left; 
    margin: 10px;
}

/* Estilo para a seção principal, tornando as imagens lado a lado */
section {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px; /* Adiciona espaço entre a seção e o rodapé */
}

/* Estilo para o vídeo do YouTube */
section iframe {
    margin-bottom: 30px; /* Adiciona espaço entre o vídeo e o botão */
}

/* Estilo para o botão */
section button {
    background-color: blue;
    color: white;
    padding: 10px;
    margin-bottom: 20px; /* Adiciona espaço entre o botão e o rodapé */
}

/* Estilo para as imagens na seção */
section img {
    width: 20%;
    height: auto;
    margin: 10px;
}

/* Estilo para o rodapé */
footer {
    background-color: brown;
    color: white;
    text-align: center;
    padding: 20px;
}

/* Estilo para a seção de vídeos */
.video-wrapper {
    margin: 30px; /* Espaço de 30px ao redor de cada vídeo */
    text-align: center; /* Centraliza os vídeos e botões na página */
}

/* Estilo para os botões de contato */
.video-wrapper button {
    display: block; /* Faz com que o botão ocupe toda a largura disponível */
    margin: 10px auto; /* Centraliza o botão na página e adiciona espaço acima e abaixo */
    background: blue; /* Define a cor de fundo do botão como azul */
    color: white; /* Define a cor do texto do botão como branco */
    padding: 10px; /* Adiciona espaço ao redor do texto do botão */
    border: none; /* Remove a borda do botão */
    cursor: pointer; /* Muda o cursor para um ponteiro quando o usuário passa o mouse sobre o botão */
}

/* Estilo para a seção de imagens e títulos */
.img-wrapper {
    display: inline-block; /* Permite que os elementos fiquem lado a lado */
    margin-right: 30px; /* Adiciona um espaço de 30px à direita de cada conjunto de imagem e título */
    text-align: center; /* Centraliza o título abaixo da imagem */
}

/* Estilo para as imagens da seção */
.img-section {
    border-radius: 20%; /* Arredonda as bordas das imagens */
}

/* Estilo para os subtítulos da seção */
.img-wrapper h3 {
    font-weight: bold; /* Torna o texto em negrito */
}

/* Estilo para o título de contatos e endereço */
h2 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;
}

/* Estilo para os botões de contato */
.contact-icons {
    display: flex;
    justify-content: space-between;
    gap: 30px; /* Espaçamento entre imagens */
    margin-bottom: 30px;
}

.contact-button {
    text-align: center;
}

.blue-button {
    background-color: #4169E1; /* Cor azul royal */
    border: none;
    padding: 15px 30px;
    border-radius: 15px;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.blue-button:hover {
    background-color: #3658A0; /* Uma cor ligeiramente mais escura para o efeito hover */
}

/* Estilo para as imagens acima dos botões de contato */
.contact-button img {
    margin-bottom: 10px;
}


.footer-text {
    font-size: 150%; /* Aumento de 50% no tamanho do texto do footer */

}
    
.contact-icons {
        display: flex; /* Utiliza flexbox para alinhar os itens lado a lado */
        justify-content: center; /* Centraliza os itens horizontalmente */
        gap: 20px; /* Adiciona um espaço entre cada item */
}

.responsive-iframe-container {
            position: relative;
            overflow: hidden;
            padding-top: 56.25%; /* Proporção 16:9 */
        }
        .responsive-iframe-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

       .contact-form-container {
    background-color: rgba(255, 255, 255, 0.1); /* fundo semi-transparente */
    padding: 20px;
    border-radius: 10px;
    margin-top: 20px; /* espaço entre o texto do rodapé e o formulário */
}

.contact-form-container h3 {
    color: #000000; /* cor branca para o título do formulário */
    text-align: center; /* centralizar o título */
    margin-bottom: 20px; /* espaço entre o título e o formulário */
}

.contact-form-container input, .contact-form-container textarea {
    width: 100%; /* ocupar toda a largura disponível */
    padding: 10px;
    margin-bottom: 10px; /* espaço entre os campos */
    border: none; /* remover a borda padrão */
    border-radius: 4px; /* bordas arredondadas */
    background-color: #fff; /* fundo branco para os campos */
    font-family: Arial, sans-serif; /* mesma fonte do restante do site */
}

.contact-form-container textarea {
    resize: none; /* desativar o redimensionamento */
}

.contact-form-container button {
    width: 100%; /* botão ocupando toda a largura disponível */
}

.contact-icons {
    display: flex; 
    justify-content: space-between; /* Espaçamento entre os botões */
    max-width: 600px; /* Largura máxima do container para que haja espaço entre os botões */
    margin: 0 auto; /* Centraliza o container na página */
}

.blue-button {
    display: flex; 
    align-items: center; /* Alinha a imagem ao centro verticalmente dentro do botão */
    padding: 10px 20px; /* Padding ao redor do botão */
    position: relative; 
    overflow: hidden; /* Esconde qualquer parte da imagem que exceda os limites do botão */
}

.blue-button img {
    width: 20px; /* Define uma largura fixa para a imagem. Ajuste conforme necessário */
    height: 20px; /* Define uma altura fixa para a imagem. Ajuste conforme necessário */
    margin-right: 10px; /* Espaço entre a imagem e o texto do botão */
}

/* Adiciona margem à direita de cada botão, exceto o último */
.contact-button:not(:last-child) {
    margin-right: 20px; /* Ajuste o valor conforme necessário */
}

/* Adiciona margem inferior ao último botão */
.contact-button:last-child {
    margin-bottom: 20px; /* Ajuste o valor conforme necessário */
}